<template>
<div class="idLayout">
    <el-card    style="width:75%"             
                v-loading="loading" 
                element-loading-text="loading..." 
                element-loading-background="white"
            >
            <template #header>
                <div class="card_header">
                    <span>客房类型</span>
                </div>
            </template>
        <el-table
            ref="multipleTableRef"
            :data="roomKinds"
            border
        >
            <el-table-column property="id" label="ID" />
            <el-table-column property="code" label="code" />
            <el-table-column property="name" label="名称" />
            <el-table-column property="descr" label="描述" >
                <template #default="scope">
                    <span>{{ scope.row.descr?scope.row.descr:'-' }}</span>
                </template>
            </el-table-column>
            <template #empty>
                    <el-empty description="无数据" />
            </template>
        </el-table>
        <div class="addItem" @click="dialogRoomType = true">
            <span>
                <el-icon><Plus /></el-icon>
            </span>
        </div>
    </el-card>

    <el-card    style="width:75%"             
                v-loading="loading" 
                element-loading-text="loading..." 
                element-loading-background="white"
            >
            <template #header>
                <div class="card_header">
                    <span>客房设施</span>
                </div>
            </template>
        <el-collapse v-model="roomSetSel" accordion>
            <el-collapse-item v-for="(item,index) in settingType" :key="item.id" :title="item.name + '--' + item.code" :name="index">
                <div class="setItem">
                    <span v-for="ite in item.deList" :key="ite.id">{{ ite.name }}</span>
                    <span @click="dialogRoomItem(item)">
                        <el-icon><Plus /></el-icon>
                    </span>
                </div>
            </el-collapse-item>
            <div class="addtitle" @click="dialogRoomSet = true">
                <span>
                    <el-icon><Plus /></el-icon>
                </span>
            </div>
        </el-collapse>
    </el-card>

<el-dialog v-model="dialogRoomType" title="添加客房类型" @close="clear">
    <ul class="Info">
        <li>
            <span>code</span>
            <el-input v-model="inpVal.code" placeholder="输入房间的标识码 Namexx" style="width: 300px"/>
        </li>
        <li>
            <span>名称</span>
            <el-input v-model="inpVal.name"  placeholder="输入客房类型名称" maxlength="10" style="width: 300px"/>
        </li>
        <li>
            <span>描述</span>
            <el-input v-model="inpVal.desc" placeholder="输入客房类型描述" maxlength="20" style="width: 300px"/>
        </li>
        <li>
            <el-button type="primary" @click="addRoomType">添加</el-button>
        </li>
    </ul>
</el-dialog>
<el-dialog v-model="dialogRoomSet" title="添加客房设施父类型" @close="clear">
    <ul class="Info">
        <li>
            <span>code</span>
            <el-input v-model="inpVal.code" placeholder="输入房间设施的标识码 Fxx" style="width: 300px"/>
        </li>
        <li>
            <span>名称</span>
            <el-input v-model="inpVal.name"  placeholder="输入客房设施名称" maxlength="10" style="width: 300px"/>
        </li>
        <li>
            <el-button type="primary" @click="addRoomSet">添加</el-button>
        </li>
    </ul>
</el-dialog>
<el-dialog v-model="dialogRoomSetItem" title="添加客房设施子类型" @close="clear">
    <ul class="Info">
        <li>
            <span>父设施</span>
            <el-input :value="inpVal.pName" placeholder="输入房间的标识码" style="width: 300px" disabled/>
        </li>
        <li>
            <span>名称</span>
            <el-input v-model="inpVal.name"  placeholder="输入客房设施基础名称" maxlength="10" style="width: 300px"/>
        </li>
        <li>
            <el-button type="primary" @click="addRoomSetItem">添加</el-button>
        </li>
    </ul>
</el-dialog>
</div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue'
import { get,post } from '@/http/axios' 
import { ElMessage } from 'element-plus'

type RoomkindsType = {
    id:number
    name:string
    code: string
    descr: string
}
type setTypeType = {
    id:number
    name:string
    code:string
    deList:Array<{
        id:number
        name:string
    }>
}
let roomSetSel = ref<number>(0)
let loading = ref<boolean>(true)
let settingType = ref<Array<setTypeType>>([])
let roomKinds = ref<Array<RoomkindsType>>([])
let dialogRoomType = ref<boolean>(false)
let dialogRoomSet = ref<boolean>(false)
let dialogRoomSetItem = ref<boolean>(false)
let inpVal = ref({
    pid: null,
    pName: null,
    code: null,
    name: null,
    id: null,
    desc: null
})

onBeforeMount(() => {
    getRoomKinds()
    getRoomType()
})
function getRoomKinds(){
    get('/roomName/queryAll').then(res => {
        let timer = setTimeout(() => {
            clearTimeout(timer)
            roomKinds.value = res.result
            loading.value = false
        },500)
    }).catch(err => {
        ElMessage.error('加载客房类型出错' + err)
    })
}
function getRoomType() {
    get('/deviceFa/queryAll').then(res => {
        settingType.value = res.result
    }).catch(err => {
        ElMessage.error('加载客房设施类型出错' + err)
    })
}
function dialogRoomItem(val:any) {
    inpVal.value.pid = val.id
    inpVal.value.pName = val.name
    dialogRoomSetItem.value = true
}
function addRoomType() {
    if (!inpVal.value.name || !inpVal.value.code){
        ElMessage.error('您存在未输入！') 
        return clear()
    }
    let set = roomKinds.value.find(el => el.name === inpVal.value.name) 
    let setCode = roomKinds.value.find(el => el.code === inpVal.value.code) 
    if (set || setCode) {
        ElMessage.warning('您输入重复了，请重新输入')
        return clear()
    }
    post('/roomName/addRoomName',{
        code: inpVal.value.code,
        name: inpVal.value.name,
        descr: inpVal.value.desc
    }).then(res => {
        if (res.result) {
            ElMessage.success('添加成功')
            dialogRoomType.value = false
            getRoomKinds()
            getRoomType()
            return clear()
        }
    }).catch(er => {
        ElMessage.error(err)
    })
}
function addRoomSet() {
    if (!inpVal.value.name || !inpVal.value.code){
        ElMessage.error('您存在未输入！') 
        return clear()
    }
    let set = settingType.value.find(el => el.name === inpVal.value.name) 
    if (set) {
        ElMessage.warning('您输入的设施的重复了，请重新输入')
        return clear()
    }
    post('/deviceFa/addDeviceFa',{
        code: inpVal.value.code,
        name: inpVal.value.name
    }).then(res => {
        console.log(res);
        if (res.result) {
            ElMessage.success('添加成功')
            dialogRoomSet.value = false
            getRoomKinds()
            getRoomType()
            return clear()
        }
        
    }).catch(err => {
        ElMessage.error(err)
    })
}
function addRoomSetItem() {
    if (!inpVal.value.name){
        ElMessage.error('您未输入名称！') 
        return clear()
    }
   let set = settingType.value.find(el => el.id === inpVal.value.pid) 
   let item = set?.deList.find(el => el.name === inpVal.value.name)
    if (item) {
        ElMessage.warning('您输入的设施的重复了，请重新输入')
        return clear()
    }
    post('/device/addDevice',{
        p_id: inpVal.value.pid,
        name: inpVal.value.name
    }).then(res => {
        if (res.result) {
            ElMessage.success('添加成功')
            dialogRoomSetItem.value = false
            getRoomKinds()
            getRoomType()
            return clear()
        }
        
    }).catch(err => {
        ElMessage.error(err)
    })
}
function clear() {
    Object.keys(inpVal.value).forEach(el => {
        inpVal.value[el] = null
    })
}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/infoKinds.scss);
@import url(../../assets/css/changePagintoin.scss);
.idLayout{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    @include allBack;
}
.paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-radius: 8px;
}
.btn{
    width: 350px !important;
}
.addItem{
    margin-top: 20px;
    width: 100%;
    @include flexRowCenter;
    & span{
        width: 100px;
        height: 30px;
        border-radius: 4px;
        @include flexRowCenter;
        border: 1px dashed  var(--el-border-color);
        cursor: pointer;
    }
    & span:hover{
        color: #409EFF;
        border: 1px dashed  #409EFF;
    }
}
.card_header{
    width: 100%;
    text-align: left;
    font-weight: 600;
}
.setTitle{
    font-size: 18px;
}
.setItem{
    user-select: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    line-height: 18px;
    & span:last-child{
        width: 30px;
        height: 20px;
        border-radius: 4px;
        @include flexRowCenter;
        border: 1px dashed  var(--el-border-color);
        cursor: pointer;
    }
    & span:last-child:hover{
        color: #409EFF;
        border: 1px dashed  #409EFF;
    }
}
.addtitle{
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    & span:nth-child(1){
        width: 100px;
        height: 30px;
        border-radius: 4px;
        @include flexRowCenter;
        border: 1px dashed  var(--el-border-color);
        cursor: pointer;
    }
    & span:last-child:hover{
        color: #409EFF;
        border: 1px dashed  #409EFF;
    }
}
.Info{
    @include flexColumnCenter;
    gap: 10px;
    list-style: none;
    & li{
        @include flexRowCenter;
        gap: 20px;
        white-space: nowrap;
    }
    & li span{
        width: 100px;
        text-align: right;
    }
    & li button{
        width: 150px;
    }
}
:deep(.el-collapse-item__header ){
    font-size: 14px;
    font-weight: 600;
}
</style>